<template>
    <div class="order_info">

        <el-empty description="暂无数据" v-if="!detailData" />
        <el-form v-else :model="detailData" label-width="auto">
            <h4 class="order_fields">工单信息</h4>
            <el-form-item label="处理方式:" label-width="80">
                <span>{{ detailData.orderType }}</span>
            </el-form-item>
            <el-form-item label="工单分类:" label-width="80">
                <span>{{ detailData.orderWay }}</span>
            </el-form-item>
            <el-form-item label="更新时间:" label-width="80">
                <span>{{ detailData.updateTime }}</span>
            </el-form-item>
            <el-form-item label="当前用时:" label-width="80">
                <span>{{ detailData.currentUseTime }}</span>
            </el-form-item>
            <el-form-item label="总耗时:" label-width="80">
                <span>{{ detailData.totalUseTime }}</span>
            </el-form-item>
            <el-form-item label="客服派单时间:">
                <span>{{ detailData.dispathOrderTime }}</span>
            </el-form-item>
            <el-form-item label="部门接单时间:">
                <span>{{ detailData.receivingOrderTime }}</span>
            </el-form-item>
            <el-form-item label="部门派工时间:">
                <span>{{ detailData.dispathOrderEngineerTime }}</span>
            </el-form-item>
            <el-form-item label="工程师接单时间:">
                <span>{{ detailData.engineerReceivingOrderTime }}</span>
            </el-form-item>
            <el-form-item label="完成时间:">
                <span>{{ detailData.orderEndTime }}</span>
            </el-form-item>
            <div class="fields_o" v-if="detailData.orderParamFields.length > 0">
                <h4 class="order_fields">自定义字段</h4>
                <div v-for="(item, bigindex) in detailData.orderParamFields" :key="bigindex">
                    <el-form-item :label="`${item.name}:`" label-width="auto">
                        <!-- 图片 -->
                        <div class="upload_file" v-if="item.type === 5 || item.type === 6 || item.type === 7"
                            :key="bigindex">
                            <ul class="ul_list">
                                <li class="li_item" v-for="(file, index) in item.val">
                                    <div class="li_item_left">
                                        <img :src="pdf" alt="" style="width: 30px; height: 30px; cursor: pointer"
                                            @click.stop="lookFile(file, '附件')"
                                            v-if="file.split('/')[file.split('/').length - 1].replace(/.+\./, '') == 'pdf'" />
                                        <el-icon style="cursor: pointer"
                                            v-else-if="(/\.(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4)$/.test(file.toLowerCase()))"
                                            size="30" @click.stop="lookFile(file, '视频')">
                                            <Film />
                                        </el-icon>
                                        <el-image v-else :preview-src-list="[file]" style="width: 30px; height: 30px"
                                            :src="file" fit="contain" />

                                        <el-tooltip effect="dark" placement="top">
                                            <template #content>
                                                {{ file.split('/')[file.split('/').length
                                                    -
                                                    1] }}
                                            </template>
                                            <span class="pic_name">{{
                                                file.split('/')[file.split('/').length
                                                -
                                                1] }}</span>
                                        </el-tooltip>
                                    </div>

                                </li>
                            </ul>
                        </div>
                        <!-- 评分 -->
                        <el-rate v-else-if="item.type == 8" disabled allow-half v-model="item.val[0]" />
                        <span v-if="item.type === 8">{{
                            item.val[0] * 2 }}</span>
                        <span class="text_c"
                            v-else-if="item.type === 1 || item.type === 2 || item.type === 3 || item.type === 4">{{
                                item.val[0]?.toString() }}</span>
                    </el-form-item>
                </div>
            </div>
        </el-form>
        <!-- 文件查看 -->
        <el-dialog :title="`查看${file.type}`" v-model="dialogContract" :draggable="true" :destroy-on-close="true"
            :close-on-click-modal="false">
            <iframe :src="`${file.file}`" width='100%' height="100%" style="height:700px" frameborder="0"></iframe>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, toRefs,watch } from 'vue'
import { getOrderParamField } from '../../../../../api/order'
import { ElMessage } from 'element-plus'
import pdf from '@/assets/image/pdf.png'
const props = defineProps({
    workId: [String, Array]
})
const { workId } = toRefs(props)
const detailData = ref(null)

// 获取详情
function getDetail() {
    getOrderParamField(workId.value).then(res => {
        if (res.data.success) {
            detailData.value = res.data.data.row
            if (res.data.data.row.orderParamFields.length > 0) {
                detailData.value.orderParamFields = res.data.data.row.orderParamFields.map(o => {

                    if (o.type == 8) {
                        o.val[0] = Number(o.val[0]) / 2
                    }
                    return o
                })
            }

        } else {
            ElMessage({
                showClose: true,
                message: res.data.message,
                type: 'error',
                duration: 4000
            })
        }
    })
}
// 查看图片
const file = ref({ file: null, type: '' }) //文件
const dialogContract = ref(false) //文件查看弹窗
const lookFile = (val, type) => {
    file.value = { file: val, type: type }
    dialogContract.value = true
}
  //监听查看附件弹窗关闭时销毁 iframe内存
  watch(dialogContract,(n)=>{
  if(!n){
    file.value.file='about:blank'
  }
})
onMounted(() => {
    getDetail()
})
defineExpose({getDetail})
</script>
<style lang="scss" scoped>
:deep(.el-form-item) {
    .el-form-item__label {
        font-size: 12px;
    }

    .el-form-item__content {
        font-size: 12px;
    }
}

.order_info {
    height: 76.5vh;
    overflow-y: auto;
    background-color: #fff;
    padding: 0 8px;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;

    /* IE 10+ */
    &::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    .text_c {
        white-space: pre-wrap;
        word-wrap: break-word;
        word-break: break-all;
    }

    .order_fields {
        font-size: 14px;
        border-left: 3px solid #007cff;
        padding-left: 5px;
        margin: 10px 0 5px;
    }

    .fields_o {
        padding-bottom: 50px;



        .upload_file {
            width: 100%;

            :deep(.el-upload-dragger) {
                padding: 0;
                font-size: 12px;
                height: 40px;
                line-height: 10px !important;
                color: #999;
            }

            .up_icon {
                color: #ccc;
                font-size: 24px;
            }

            .ul_list {
                max-height: 230px;
                overflow-y: auto;
                margin-top: 10px;
                padding: 0 6px;

                .li_item {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #999;
                    font-size: 12px;

                    .li_item_left {
                        display: flex;
                        align-items: center;
                        width: 100%;

                        .pic_name {
                            padding-left: 10px;
                            color: #000;
                            margin-right: 5px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            width: 90%;
                            overflow: hidden;
                        }
                    }
                }
            }
        }
    }
}
</style>